<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>

    <script src="/js/jquery-3.5.1.min.js"></script>

    <style>
        .div-box {
            width: 400px;
            height: 250px;
            margin: 150px auto;
            border: 1px solid #DCDFE6;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 30px #DCDFE6;
        }

        h3 {
            text-align: center;
        }

    </style>
</head>
<body>

<div class="div-box">
    <h3>用户注册</h3>
    <form>
        <span class="name-label">账号：</span><input type="text" name="account" id="account"><br>
        <span class="name-label">密码：</span><input type="password" name="password" id="password"><br>
        <span class="name-label">确认密码：</span><input type="password" name="rePassword" id="rePassword"><br>
        <input type="button" value="注册" onclick="register();return false;">
        <input type="button" value="去登录" onclick="login();return false;">
    </form>

</div>

<script>
    function login(){
        window.location.href="/pages/login";
    }

    function register() {
        var account = $("#account").val();
        var password = $("#password").val();
        var rePassword = $("#rePassword").val();
        console.log("account=" + account + ";password=" + password + ";rePassword=" + rePassword);
        var user = new Object();
        user.account = account;
        user.password = password;
        user.rePassword = rePassword;
        $.ajax({
            dataType: "json",
            type: "POST",
            url: "/user/register",
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(user),
            success: function (result) {
                if(result.success === true){
                    alert("注册成功！请登录！")
                    window.location.href = "/pages/login";
                }else{
                    alert(result.message);
                }

            }, error: function () {
                alert("注册失败！");
            }
        });
    }
</script>
</body>
</html>